<template>
	<view>
		<uni-drawer :visible="visibleDrawer" mode="right" @close="closeDrawer()">
			<scroll-view class="drawer-list" scroll-y :style="{'height': drawerHeight}">
				<block v-for="(item, index) in menuList" :key="index">
					<!-- 单选、多选  isMutiple是否支持多选-->
					<view v-if="item.type === 'custom' && item.detailList.length">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
							<text v-if="item.detailList.length>showLenght"
								@tap="showMore(index)">{{item.showMoreList ? '收起' : '更多'}}</text>
						</view>
						<view class="draer-list-con">
							<template v-if="!item.showMoreList">
								<text
									:style="{background: textItem.isSelected ? color : '', color:  textItem.isSelected ? '#ffffff' : ''}"
									v-if="idx<showLenght" v-for="(textItem, idx) in item.detailList" :key="idx"
									:class="textItem.isSelected ? 'on' : ''"
									@tap="itemTap(idx,item.detailList,item.key, item.isMutiple)">
									{{textItem.title}}
								</text>
							</template>
							<template v-else>
								<text
									:style="{background: textItem.isSelected ? color : '', color:  textItem.isSelected ? '#ffffff' : ''}"
									v-for="(textItem, idx) in item.detailList" :key="idx"
									:class="textItem.isSelected ? 'on' : ''"
									@tap="itemTap(idx,item.detailList,item.key, item.isMutiple)">
									{{textItem.title}}
								</text>
							</template>
						</view>
					</view>
					
					
					<view  v-if="item.type === 'picker'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<picker @change="bindPickerChange($event,'indexss','userLists','userId')" :value="indexss" :range="item.userLists" :range-key="'name'" class="picker-range">
							<text class="dav-icon"></text>
							<view class="uni-input">{{item.userLists[indexss].name}}</view>
						</picker>
					</view>
					
					<view  v-if="item.type === 'pickers'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<picker @change="bindPickerChanges($event,'indexs','userLists','userId',item.key)" :value="indexs" :range="item.userLists" :range-key="'name'" class="picker-range">
							<text class="dav-icon"></text>
							<view class="uni-input" v-if="item.key!=='department'">{{item.userLists[indexs].name}}</view>
							<view class="uni-input" v-else>{{item.userLists[productDepartment_index].name}}</view>
						</picker>
					</view>
					
					<view  v-if="item.type === 'pickerssss'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<picker @change="bindPickerChangessss($event,'indexsssss','userLists','userId')" :value="indexsssss" :range="item.userLists" :range-key="'name'" class="picker-range">
							<text class="dav-icon"></text>
							<view class="uni-input">{{item.userLists[indexsssss].name}}</view>
						</picker>
					</view>
					<view  v-if="item.type === 'pickerssssss'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<picker @change="bindPickerChangessssss($event,'indexsssss','userLists','userId')" :value="indexsssss" :range="item.userLists" :range-key="'name'" class="picker-range">
							<text class="dav-icon"></text>
							<view class="uni-input">{{item.userLists[indexsssss].name}}</view>
						</picker>
					</view>
					<!-- 筛选状态 -->
					<view  v-if="item.type === 'pickersssss'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<picker @change="bindPickerChangesssss($event,'indexssssss','userLists','userId')" :value="indexssssss" :range="item.userLists" :range-key="'name'" class="picker-range">
							<text class="dav-icon"></text>
							<view class="uni-input">{{item.userLists[indexssssss].name}}</view>
						</picker>
					</view>
					
					<view  v-if="item.type === 'pickerss'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<picker @change="bindPickerChangess($event,'indexs','userLists','userId')" :value="indexsss" :range="item.userLists" :range-key="'label'" class="picker-range">
							<text class="dav-icon"></text>
							<view class="uni-input">{{item.userLists[indexsss].label}}</view>
						</picker>
					</view>
					
					
					<view  v-if="item.type === 'pickersss'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<picker @change="bindPickerChangesss($event,'indexs','userLists','userId')" :value="indexssss" :range="item.userLists" :range-key="'label'" class="picker-range">
							<text class="dav-icon"></text>
							<view class="uni-input">{{item.userLists[indexssss].label}}</view>
						</picker>
					</view>
					
					
					<!-- 时间带时分秒范围选择 -->
					<view v-if="item.type === 'rangetime'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<view class="dateContent" @click="onShowDatePicker('rangetime', item.key)">
							<view>
								<template v-if="result[item.key] && result[item.key].length > 0">
									{{rangetime[0]}}
								</template>
							</view>
							<view>
								<template v-if="result[item.key] && result[item.key].length > 0">
									{{rangetime[1]}}
								</template>
							</view>
						</view>
					</view>
					<!-- 时间不带时分秒范围选择 -->
					<view v-if="item.type === 'range'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<view class="dateContent" @click="onShowDatePicker('range', item.key)">
							<view>
								<template v-if="result[item.key] && result[item.key].length > 0">
									{{range[0]}}-{{range[1]}}
								</template>
							</view>
						</view>
					</view>
					<!-- 时间选择 -->
					<view v-if="item.type === 'date'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<view class="dateContent" @click="onShowDatePicker('date', item.key)">
							<view>
								<template v-if="result[item.key] === date">
									{{date}}
								</template>
							</view>
						</view>
					</view>
					<!-- 时间选择 -->
					<view v-if="item.type === 'dates'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<view class="dateContent" @click="onShowDatePicker('dates', item.key)">
							<view>
								<template v-if="result[item.key] === dates">
									{{dates}}
								</template>
							</view>
						</view>
					</view>
					<!-- 数值范围选择 -->
					<view v-if="item.type === 'rangenumber'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<view class="dateContent rangenumber-content flex">
							<view class="rangenumber-input">
								<input class="m-input" type="number" clearable v-model="minNumber"
									:placeholder="item.minPlaceholder || '最小值'"
									@blur="numberInputBlur(item.key)"></input>
							</view>
							<text>-</text>
							<view class="rangenumber-input">
								<input class="m-input" type="number" clearable v-model="maxNumber"
									:placeholder="item.maxPlaceholder || '最大值'"
									@blur="numberInputBlur(item.key)"></input>
							</view>
						</view>
					</view>
					<!-- 单输入框 -->
					<view v-if="item.type === 'singleinput'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<view class="dateContent">
							<view>
								<input class="m-input" clearable v-model="code" confirm-type="search" @confirm="search()"
									:placeholder="item.placeholder || '请输入关键字'" />
							</view>
						</view>
					</view>
					<!-- 单输入框 -->
					<view v-if="item.type === 'singleinputs'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<view class="dateContent">
							<view>
								<input class="m-input" clearable v-model="result[item.key]"
									:placeholder="item.placeholder || '请输入关键字'" />
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			<view class="filter-content-footer flex justify-center">
				<view class="filter-content-footer-item" :style="{color, 'border': `1rpx solid ${color}`}"
					@tap="resetClick">
					<text style="font-size: 30rpx;">重置</text>
				</view>
				<view class="filter-content-footer-item" :style="{'background': color}" @tap="sureClick">
					<text style="font-size: 30rpx;">确认</text>
				</view>
			</view>
		</uni-drawer>
		<mx-date-picker :show="showPicker" :color="color" :type="dateType" :value="dateValue" :show-tips="true"
			:show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
			
	</view>
</template>

<script>
	/***
	 * 筛选组件，当前支持多选、单选
	 * item.type (custom 单选、多选、rangetime 时间范围带时分秒、range 时间范围不带时分秒、rangenumber 数字范围)
	 * item.isMutiple 是否支持多选
	 * 筛选后返回格式{"listName1":[value,value](多选),"listName2":"value"（单选）,...}
	 * rangenumber形式-可能为["",1]或[1,""]表示只有一个最大值或最小值
	 ***/
	 
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		props: {
			list: {
				required: true,
				type: Array,
				default () {
					return [];
				},
			},
			color: {
				type: String,
				default: '#4D7BFE',
			},
		},
		components: {
			uniDrawer,
			MxDatePicker,
		},
		beforeCreate() {
			Date.prototype.Format = function(fmt) { //author: meizz
				var o = {
					"M+": this.getMonth() + 1, //月份 
					"d+": this.getDate(), //日 
					"h+": this.getHours(), //小时 
					"m+": this.getMinutes(), //分 
					"s+": this.getSeconds(), //秒 
					"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
					"S": this.getMilliseconds() //毫秒 
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1
					.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
						k]) : (("00" + o[
						k]).substr(("" + o[k]).length)));
				return fmt;
			}
		},
		created() {
			this.resetResult();
			uni.getSystemInfo({
				success: (res) => {
					let windowHeight = res.windowHeight;
					// #ifdef H5
					windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body
						.clientHeight || res.windowHeight;
					// #endif
					this.drawerHeight = (windowHeight - uni.upx2px(120)) + 'px';
				}
			});
		},
		computed: {
			defaultSelectedObj() { // 保存初始状态
				return this.getSelectedObj()
			},
			selectedObj: {
				get() {
					return this.getSelectedObj()
				},
				set(newObj) {
					return newObj;
				}
			},
			menuList() {
				return this.list;
			}
		},
		data() {
			return {
				coupon: {
				   'coupon': false,
					list: [],
				},
				code:'',
				indexss:0,
				indexs:0,
				indexssss:0,
				indexsssss:0,
				indexssssss:0,
				indexsss:0,
				visibleDrawer: false,
				menuKey: 1,
				showLenght: 6,
				drawerHeight: '500px',
				selectDetailList: [],
				result: {},
				resultObj:{},
				showPicker: false,
				time: '',
				datetime: '',
				range: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), new Date().Format(
					'yyyy-MM-dd')],
				rangetime: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd hh:mm'), new Date()
					.Format(
						'yyyy-MM-dd hh:mm')
				],
				date: new Date().Format('yyyy-MM-dd'),
				dates: new Date().Format('yyyy-MM-dd'),
				dateType: 'rangetime',
				dateValue: '',
				minNumber: '',
				maxNumber: '',
				productDepartment_index:0,
			};
		},

		methods: {
			
			getSelectedObj() {
				return this.commonResultObj();
			},
			resetResult() {
				this.result = this.commonResultObj();
			},
			bindPickerChange(e,index,list,id){
				 this.indexss=e.target.value
		    },
			bindPickerChanges(e,index,list,id,key){
				console.log(77777777777)
				console.log(key)
				if(key === 'department'){
					this.productDepartment_index = e.target.value
				}else{
					this.indexs=e.target.value
				}
			},
			bindPickerChangess(e,index,list,id){
				 this.indexsss=e.target.value
			},
			bindPickerChangesss(e,index,list,id){
				 this.indexssss=e.target.value
			},
			bindPickerChangessss(e,index,list,id){
					 this.indexsssss=e.target.value
			},
			bindPickerChangessssss(e,index,list,id){
					 this.indexsssss=e.target.value
			},
			bindPickerChangesssss(e,index,list,id){
					 this.indexssssss=e.target.value
			},
			commonResultObj() {
				let obj = {};
				this.menuList.map((item) => {
					switch(item.type) {
						case "custom":
							item.isMutiple ? obj[item.key] = [] : obj[item.key] = '';
							break;
						case 'range':
						case 'rangetime':
						case 'rangenumber':
							obj[item.key] = []
							break;
						default:
							obj[item.key] = '';
					}
				})
				return obj;
			},
			//筛选项选中或取消
			itemTap(index, list, key, isMutiple) {
				if (isMutiple == true) {
					list[index].isSelected = !list[index].isSelected;
					if (list[index].isSelected) {
						this.selectedObj[key].push(list[index].value);
					} else {
						list[index].isSelected = false;
						var idx = this.selectedObj[key].indexOf(list[index].value);
						this.selectedObj[key].splice(idx, 1);
					}
					this.result[key] = this.selectedObj[key];
				} else {
					this.result[key] = list[index].isSelected ? '' : list[index].value;
					for (let i = 0; i < list.length; i++) {
						if (index == i && !list[i].isSelected) {
							list[i].isSelected = true
						} else {
							list[i].isSelected = false
						}
					}
				}
				
				this.indexss=''
				this.indexs=''
				this.code=''
				this.indexsss=''
				this.indexssss=''
				this.indexsssss=''
				this.range[0]=''
				this.range[1]=''
				// #ifdef H5
				this.$forceUpdate();
				// #endif
			},
			//监听input输入框的键盘回车键
			search(){
				this.sureClick()
			},
			sureClick() {
				let str_result = {};
				let hasChoose = false;
				this.resultObj={
					dept:this.indexss,
					user:this.indexs,
					code:this.code,
					pick_3:this.indexsss,
					pick_4:this.indexssss,
					supplier:this.indexsssss,
					range:this.range[0],
					ranges:this.range[1],
					orderIndex:this.indexssssss,
					department_index:this.productDepartment_index
				}
				this.$emit("result", {
					'result': this.resultObj,
					'obj':this.result,
					'visibleDrawer': false
				});
			},
			resetClick() {
				this.minNumber = '';
				this.maxNumber = '';
			
				for (let key in this.result) {
					if (typeof this.result[key] === 'object') {
						this.selectedObj[key] = [];
						this.result[key] = [];
					} else {
						this.result[key] = '';
					}
				}
				for (let i = 0; i < this.menuList.length; i++) {
					if (this.menuList[i].type === 'custom') {
						for (let j = 0; j < this.menuList[i].detailList.length; j++) {
							this.menuList[i].detailList[j].isSelected = false;
						}
					}
				}
				
				this.indexss=0
				this.indexs=0
				this.code=''
				this.indexsss=0
				this.indexssss=0
				this.indexsssss=0
				this.indexssssss=0
				this.productDepartment_index=0
				this.range[0]=''
				this.range[1]=''
				// #ifdef H5
				this.$forceUpdate();
				// #endif
			},
			closeDrawer() {
				this.visibleDrawer = false;
			},

			showMore(index) {
				this.menuList[index].showMoreList = !this.menuList[index].showMoreList;
				++this.menuKey;
				// #ifdef H5
				this.$forceUpdate();
				// #endif
			},

			onShowDatePicker(type, key) { //显示
				this.dateType = type;
				this.dateValue = this[type];
				this.showPicker = true;
				this.tempKey = key;
			},

			onSelected(e, key) { //选择
				this.showPicker = false;
				if (e) {
					this[this.dateType] = e.value;
					this.result[this.tempKey] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			},

			numberInputBlur(key) {
				if (this.minNumber != '' && this.maxNumber != '' && parseFloat(this.minNumber) > parseFloat(this
						.maxNumber)) {
					let temp = this.minNumber;
					this.minNumber = this.maxNumber;
					this.maxNumber = temp;
				}
				this.result[key] = [];
				this.result[key].push(this.minNumber && parseFloat(this.minNumber));
				this.result[key].push(this.maxNumber && parseFloat(this.maxNumber));
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.justify-between {
		justify-content: space-between;
	}

	view,
	scroll-view,
	swiper,
	button,
	input,
	textarea,
	label,
	navigator,
	image {
		box-sizing: border-box;
	}

	/* 筛选样式 */
	.drawer-list {
		padding: 0 20rpx;
		font-size: 26rpx;
	}

	input {
		font-size: 26rpx;
	}

	.drawer-list .drawer-list-title {
		font-size: 34rpx;
		font-weight: 400;
		line-height: 48rpx;
		margin: 38rpx 0 18rpx;
		color: rgba(34, 34, 34, 1);
	}

	.drawer-list .drawer-list-title>text {
		font-size: 26rpx;
		color: #666666;
	}

	.drawer-list .draer-list-con>text {
		background: rgba(93, 92, 254, 0.1);
		border-radius: 28px;
		color: #666666;
		font-size: 28rpx;
		padding: 10rpx 28rpx;
		margin: 10rpx 10rpx 10rpx 0;
		display: inline-block;
	}

	.filter-content-footer-item {
		width: 180rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 8rpx;
		margin: 14rpx;
		color: #FFFFFF;

	}
	.picker-range{
		width: 100%;
		overflow: hidden;
		position: relative;
	}
	.picker-range .dav-icon{
		width: 38rpx;
		height: 38rpx;
		background: url(../../static/images/jiantous.png) no-repeat center;
		background-size: 100%;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.picker {
		z-index: 99999 !important;
	}
	.uni-input{
		background: rgba(244, 244, 244, 1);
		border-radius: 8rpx;
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		margin-bottom: 12rpx;
		padding: 0 12rpx;
	}

	.dateContent {
		&>view {
			background: rgba(244, 244, 244, 1);
			border-radius: 8rpx;
			width: 100%;
			height: 64rpx;
			line-height: 64rpx;
			margin-bottom: 12rpx;
			padding: 0 12rpx;
		}
	}

	.rangenumber-content {
		&>text {
			display: inline-block;
			width: 10%;
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
		}

		.rangenumber-input {
			width: 45%;
			display: inline-block;
			padding: 0 12rpx;
		}
	}

	.m-input {
		height: 64rpx;
		line-height: 64rpx;
	}

	::v-deep .picker {
		z-index: 999;
	}
</style>
